<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 <%
	String path = request.getContextPath();
	request.setAttribute("path", path);
  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改密码</title>
		<link rel="stylesheet" href="${path}/common/css/registercss/register.css"/>
		<script type="text/javascript" src="${path}/common/js/jquery-1.8.3.min.js" ></script>
	</head>
	
<body>
		<form  name="form1" action="${path}/user/setpassword/success" method= "post" id="zform">
		<div class="regist" style="height:480px ;">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">修改密码</div>
					<div class="right fr"><a href="./index.html" target="_self">卓应商城</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
				<ul>
				<li class="lis7"  id="lis7">
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input class="shurukuang" id="phone" onblur="ckphone()" type="text" name="userPhone" placeholder="请填写正确的手机号"/>
						<span id="iok_phone"  class="spans" style="color: red;"></span>
					</div>
				</li>
				<div></div>
					
					<li class="lis8"  id="lis8">
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;
							<input class="yanzhengma" type="text" onblur="cksendcode()" name="code" id="code" placeholder="请输入您收到的验证码"/>
							<input class="button" style="width:80px;height:30px;background: ;" type="button" id="" value="获取验证码" onclick="sed(this)">
							<span id="iok_code"  class="spans" style="color: red;"></span>
						</div>
					</div>
					</li>
					<div></div>
					
					<li class="lis2" id="lis2">
					<div class="username">新&nbsp;&nbsp;密&nbsp;&nbsp;码:&nbsp;&nbsp;
						<input class="shurukuang" type="password" id="password" name="userPassword" placeholder="请输入你的密码"/>
						<span id="iok_userName"  class="spans" style="color: red;"></span>		
					</div>
					</li>
					<div></div>
					
					<li class="lis3"  id="lis3">
					<div class="username">确认密码:&nbsp;&nbsp;
						<input class="shurukuang" id="repassword" type="password" name="repassword" placeholder="请确认你的密码"/>
						<span id="iok_userName"  class="spans" style="color: red;"></span>
					</div>
					</li>
					<div></div>
			
				</div>
				<div class="regist_submit">
					<input class="submit" id="nextBtn" type="submit"  value="确认修改" onclick="addUser()">
				</div>
				</ul>
			</div>
		</div>
		</form>
		
		<script type="text/javascript">
		//通过正则进行校验
		function addUser(i) {
			console.log(${sessionScope.notecode});
			var password = document.querySelector("#password");
			var repassword = document.querySelector("#repassword");
			var phone = document.querySelector("#phone");
			
			//判断电话号码格式
			if(phone.value == ""){
				$(".lis7").find("#iok_phone").html("手机号号不能为空");
				return;
			}else {
				var regex = /^1(3|4|5|7|8)\d{9}$/;
				if(regex.test(phone.value)){
					$(".lis7").find("#iok_phone").html("");
				}else{
					$(".lis7").find("#iok_phone").html("手机号格式不规范");
					return;
				}
			}
			
	 		 //判断验证码
		 	if(code.value == ""){
		 		$(".lis8").find("#iok_code").html("请输入验证码");
				return;
			}else{
				if($("#iok_code").text() != ""){
					return;
				}
			}
		
			//判断密码
			if(password.value == ""){
				$(".lis2").find("#iok_userName").html("密码不能为空!");
				return;
			}else {
				var regex = /^\w{6,20}$/;
				if(regex.test(password.value)){
					$(".lis2").find("#iok_userName").html("");
				}else{
					$(".lis2").find("#iok_userName").html("密码格式不规范");
					return;
				}
			}
			
			//判断密码一不一致
			if(repassword.value == ""){
				$(".lis3").find("#iok_userName").html("密码不能为空!");
				return;
			}else {
				$(".lis3").next().html("");
				$("#iok_repassword").html("<i class='fa fa-check-circle yescheck'></i>");
			}
			if(password.value != repassword.value){
				$(".lis3").find("#iok_userName").html("两次密码不一致");
				return;
			}else {
				$(".lis3").find("#iok_userName").html("");
			}
		
			var f1 = document.querySelector("#zform");
			f1.submit();
		}
		
		
		$("#nextBtn").click(function () {
		    return false;
		});
		
		//用ajax判断手机号是否已被注册
		 function ckphone() {
			var phone = $("#phone").val();
			$.post("/user/checkph",{"userPhone":phone},function(data){
				if(data =="false"){
					 $(".lis7").find("#iok_phone").html("");		
				}else{
					 $(".lis7").find("#iok_phone").html("该账号不存在");
				}
			})	
		} 
		
		//用ajax判断验证码是否正确
	 	 function cksendcode() {
			var sendcode = $("#code").val();
			$.post("/user/scode",{"sendcode":sendcode},function(data){
				if(data =="false"){
					 $(".lis8").find("#iok_code").text("验证码不正确");
					 return;
				}else{
					 $(".lis8").find("#iok_code").text("");	
				}
			})	
		}
		
		
		
		//控制获取验证码按钮的不可点击
		var index = 120;
		var v;
		function sed(obj){
			var phone = document.querySelector("#phone");
			var regex = /^1(3|4|5|7|8)\d{9}$/;
			console.log((regex.test(phone.value)));
			if((regex.test(phone.value)==false)){
				$(".lis7").find("#iok_phone").html("手机号格式不规范");
				return;
			}else{
				$(".lis7").find("#iok_phone").html("");
				obj.style.backgroundColor = "#F3F5F8";
				v = setInterval("setTime()",1000)
				$(".button").prop("disabled","disabled");
				
				var xmlhttp;
				if (window.XMLHttpRequest){
				    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				    xmlhttp=new XMLHttpRequest();
				}else{
				    // IE6, IE5 浏览器执行代码
				    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				var uphone = phone.value;
				xmlhttp.open("GET","/user/setpassword/gainNote?uphone="+uphone);
				xmlhttp.send();
				xmlhttp.onreadystatechange=function(){
				    if (xmlhttp.readyState==4 && xmlhttp.status==200){
				    }
				}
			}
		}
		function setTime(){
			$(".button").val(index);
			index --;
			if(index < 0){
				clearTimeout(v);
				index = 120;
				$(".button").val("获取验证码");
				$(".button").prop("disabled",false);
				$(".button").css("backgroundColor","")
			}
		}
		
	</script>
	</body>
</html>
